<template>
	<div class="header">
		<img src="../../public/刷新.png" alt="" class="pic" @click="refesh"/>
		 <div class="leader">
			 <span v-for="(x,index) in urls" @click="jump(x,index)">{{x}}/</span>
		</div>
		<div class="settings">
			<div class="imgs">
				<!-- <img src="../../public/1火箭.png" alt="1" /> -->
				<!-- <img src="../../public/3.1铃铛.png" alt="2" /> -->
				<img src="../../public/设置.png" alt="3" @click="Setting" />
				<img src="../../public/头像.png" alt="4" />
				<el-dropdown class="select" size="small"> 
				      <el-button type="primary" style="background-color: #fff; color:#000;border: none;margin-top: 15px;">
				        admin<el-icon class="el-icon--right"><arrow-down /></el-icon>
				      </el-button>
				      <template #dropdown>
				        <el-dropdown-menu>
				          <el-dropdown-item @click="exit">退出登录</el-dropdown-item>
				          
				        </el-dropdown-menu>
				      </template>
				</el-dropdown>
			</div>
			
		</div>
	</div>
	
</template>

<script setup>
	import { ArrowDown } from '@element-plus/icons-vue'
	import { ref } from 'vue';
	import {useRouter,useRoute} from "vue-router";
		let router = useRouter();
		let route = useRoute();
		let curUrl=route.path.substring(1) //当前路径
		let urls=ref(curUrl.split("/"));
		// console.log("urls",urls)
	//导航地址跳转
	const jump=(url,index)=>{
			if(index==0){
				router.push("/"+url)
			}
			if(index==1){
				// router.go(-1)
				let nowUrl=route.path
				let aimUrl=curUrl.split("/")
				// console.log(aimUrl)
				router.push("/"+aimUrl[0]+"/"+aimUrl[1])
			}
	}
	
	//刷新
	const refesh=()=>{
		window.location.reload()
	}
	//设置
	const Setting=()=>{
		if(router.currentRoute.value.fullPath!="/setting/menusetting"){
			router.push("/setting")
		}
		
	}
	//退出登录
	const exit=()=>{
		sessionStorage.clear()
		window.location.reload()
	}
</script>

<style lang="less" >
	.header{
			width: 100%;
			height: 10vh;
			// border-left:2px solid #ccc;
			position: relative;
			background-color: #fff;
			box-sizing: border-box;
			.pic{
				width: 33px;
				height: 33px;
				position: absolute;
				top: 20px;
				left: 20px;
			}
			.leader{
				display: inline-block;
				position: absolute;
				left: 60px;
				top:25px ;
			}
			.settings{
				img{
					width: 25px;
					height: 25px;
					margin: 18px;
				}
				.imgs{
					float: right;
				}
			}
			
		}
		.select{
			float: right;
		}
</style>